<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        let person = {
            name: '张三',
            age: 18
        }

        // 模拟vue2中的响应式
        let p2 = {}
        Object.defineProperty(p2, 'name',{
            get(){
                console.log('有人读取了name的数据')
                return person.name
            },
            set(value) {
                console.log('有人修改了name的数据')
                person.name = value
            },
        })
        Object.defineProperty(p2, 'age',{
            get(){
                console.log('有人读取了age的数据')
                return person.age
            },
            set(value) {
                console.log('有人修改了age的数据')
                person.age = value
            },
        })

        // vue3中的响应式
        const p3 = new Proxy(person,{
            // 有人读取p的某个属性时调用
            get(target, prop) {
                return target[prop]
            },
            // 有人修改或新增某个属性时调用
            set(target, prop, value) {
                target[prop] = value
            },
            // 有人删除p的某个属性时调用
            deleteProperty(target, prop) {
                return delete target[prop]
            }
        })

    </script>
</body>
</html>
